<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<html>
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Prueba con Primefaces</title>
</h:head>

<h:body>
	<h:form id="form"  style="width:700px">

		<p:calendar value="#{calendarBean.date1}" mode="inline" id="inlineCal" />

		<h3><h:outputLabel value="#{messages.holaMundo}"/> </h3>
		<p:calendar value="#{calendarBean.date2}" id="popupCal" />

		<h3>Popup Button</h3>
		<p:calendar value="#{calendarBean.date3}" id="popupButtonCal"
			showOn="button" />

		<p:commandButton value="Submit" update="display"
			oncomplete="dialog.show()" />

		<p:dialog header="Selected Dates" widgetVar="dialog" showEffect="fade"
			hideEffect="fade">

			<h:panelGrid id="display" columns="2" cellpadding="5">

				<h:outputText value="Inline Date:" />
				<h:outputText value="#{calendarBean.date1}" id="inlineDate">
					<f:convertDateTime pattern="d/M/yyyy" />
				</h:outputText>

				<h:outputText value="Popup Date:" />
				<h:outputText value="#{calendarBean.date2}" id="popupDate">
					<f:convertDateTime pattern="d/M/yyyy" />
				</h:outputText>

				<h:outputText value="Popup Button Date: " />
				<h:outputText value="#{calendarBean.date3}" id="popupButtonDate">
					<f:convertDateTime pattern="d/M/yyyy" />
				</h:outputText>

			</h:panelGrid>

		</p:dialog>

	</h:form>


	<h:form id="form1">

		<p:panel header="Colors">
			<h:panelGrid columns="2" cellpadding="10">
				<h:outputText value="Inline: " />
				<p:colorPicker id="inlineCP" value="#{colorBean.color1}"
					mode="inline" />

				<h:outputText value="Popup: " />
				<p:colorPicker id="popupCP" value="#{colorBean.color2}"
					widgetVar="picker" />
			</h:panelGrid>

			<p:separator />

			<p:commandButton value="Submit" oncomplete="dlg.show()"
				update="grid @parent" />
		</p:panel>

		<p:dialog modal="true" widgetVar="dlg" showEffect="fade"
			hideEffect="fade" header="Selected Colors" resizable="false">
			<h:panelGrid columns="2" id="grid">
				<h:outputText value="Color 1: " />
				<h:outputText value="#{colorBean.color1}"
					style="background-color:\##{colorBean.color1}" />

				<h:outputText value="Color 2: " />
				<h:outputText value="#{colorBean.color2}"
					style="background-color:\##{colorBean.color2}" />
			</h:panelGrid>
		</p:dialog>

	</h:form>
</h:body>
	</html>
</f:view>